import React, { useEffect, RefObject, useState } from "react";
// antd-ui组件
// import { Dialog, DatePicker, Radio } from "antd-mobile";
// 日期
import dayjs from "dayjs";
// import type { DatePickerRef } from "antd-mobile/es/components/date-picker";
// 清除日期
// import { CloseCircleFill } from "antd-mobile-icons";
// antd-ui组件
import { Form, Input, Button,  } from "antd-mobile";
type Props = {}

// 路由
import { useNavigate, useLocation, redirect } from "react-router-dom";

// 用于微信请求
// import axios from "axios";
import wxfetch from "../../utils/wxfetch";

// 后端接口
import { ApiSendCaptcha, ApiRegister, ApiCheckLogin, ApiMemberUpdate } from "@/utils/api";

// 导入仓库
import {
  storeIsLogin,
  storeUser,
  myUserToken,
  changeIsLogin,
  changeUser,
  changeUserToken
} from "@/store/userSlice";

// 导入带有类型的属性，方法 1.
import { useAppDispatch, useAppSelector } from "../../hooks";
// 加密解密
import crypt from "@/utils/crypto";

  // 定义item接口
  interface RootObject {
    name: string;
    sex: number;
    birthday: any;
    captcha: number | string;
    mobile: string | number;
    plate_number: string;
  }
  // 微信正确请求
interface wxInfo {
  openid: string;
  nickname: string;
  sex: number;
  language: string;
  city: string;
  province: string;
  country: string;
  headimgurl: string;
  privilege: any[];
}
// 微信AccessToken
interface AccessToken {
  access_token: string;
  expires_in: number;
  refresh_token: string;
  openid: string;
  scope: string;
  createdTime?: number;
  endTime?: number;
}

export default function register({}: Props) {
  // 表单更新
  const [form] = Form.useForm();

  // 导入仓库 2.使用属性
  // const IsLogin = useAppSelector(storeIsLogin);
  // const myUser = useAppSelector(storeUser);
  const UserToken = useAppSelector(myUserToken);
  // 导入仓库 2.使用方法
  const dispatch = useAppDispatch();

  // 路由跳转
  const navigate = useNavigate();

  // 获取路由参数code
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const code = searchParams.get("code");

  // 获取路由code
  const getCode = () => {
    // 携带路由参数
    if (code) {
      getAccessToken(code);
      //   否则回注册页
    } else if (!code) {
      console.log("未携带code访问");
      pushRegister();
    }
  };

  // 去到注册页;
  const pushRegister = () => {
    // window.location.href = "http://127.0.0.1:8080";
    navigate("/register");
  };



  // 用户手机号等
  const [formData, setFormData] = useState({
    name: "",
    sex: 0,
    birthday: null,
    mobile: "",
    captcha: "",
    plate_number: ""
  });

  // 检查并登录的member_id
  const [member_id, setMember_id] = useState(-1);
  // 更新
  const [isUpdate, setIsUpdate] = useState(false);

  // 修改user对象属性值
  const handleFieldChange = <K extends keyof RootObject>(
    fieldName: K,
    value: RootObject[K]
  ) => {
    // console.log(fieldName, value);
    setFormData((prevData) => ({
      ...prevData,
      [fieldName]: value,
    }));
  };

  //  user对象里的属性名 属性值
  const handleNameInputChange = (
    type: keyof RootObject,
    value: RootObject[keyof RootObject]
  ) => {
    // console.log("type", type);
    handleFieldChange(type, value);
    // console.log("formData", formData);
  };

  // 获取accessToken
  const getAccessToken = async (code: string) => {
    // 是否已注册
    // const isRegister = checkRegister();
    // 是否有accessToken
    const encryptedUserToken = checkUserToken();
    let isTime = false;
    if (encryptedUserToken) {
      // 有
      // 判断是否过期
      isTime = checkTime(encryptedUserToken);
    }
    if (isTime) {
      navigate("/index");
    } else {
      // 重新请求
    }
    // 获取accessToken
    const data = await wxfetch.getAccessTokenFn(code);
    // 获取失败
    if (data.errcode) {
      // 重新获取
      console.log("code过期");
      // 返回注册页
      pushRegister();
      return;
    } else {
      // 获取成功access_token
      // 存access_token的openid到仓库,用于后续获取会员信息
      dispatch(changeUserToken(data));
      // console.log(UserToken, "UserToken");
      // navigate("/index");
    }

    // 已注册过
    // if (isRegister) {
    //   console.log("已注册过");
    //   // 校验access_token是否过期
    //   navigate("/index");
    //   return;
    // } else {
    //   // 校验该用户是否注册过
    //   console.log("未注册过");
    // }
  };

  // // 加密phone
  // const handleRegistration = (phoneNumber: string) => {
  //   // 在存储到 localStorage 之前加密手机号
  //   const encryptedPhoneNumber = crypt.encrypt({ phoneNumber });
  //   localStorage.setItem("encryptedUserPhoneNumber", encryptedPhoneNumber);
  //   return encryptedPhoneNumber;
  // };

  // // 检测是否注册过手机号
  // const checkRegister = () => {
  //   // 检查是否存在已加密的手机号信息在 localStorage 中
  //   const encryptedPhoneNumber = localStorage.getItem(
  //     "encryptedUserPhoneNumber"
  //   );

  //   if (encryptedPhoneNumber) {
  //     // 用户已注册，解密手机号并重定向到会员信息页
  //     const decryptedPhoneNumber = crypt.decrypt(encryptedPhoneNumber);
  //     console.log("解密的 mobile Number:", decryptedPhoneNumber);
  //     console.log("是否有openid");
  //     console.log(UserToken, "UserToken");
  //     // 重定向到会员信息页
  //     // window.location.href = "http://mfmaef89.beesnat.com/index";
  //     return true;
  //   }
  //   return false;
  // };

  // 加密UserToken
  const handleUserTokenEncryption = (userToken: object) => {
    // 在存储到 localStorage 之前加密用户令牌
    const encryptedUserToken = crypt.encrypt({
      ...userToken,
      createdTime: Date.now(),
    });
    localStorage.setItem("encryptedUserToken", encryptedUserToken);
    return encryptedUserToken;
  };

  // 解密accessToken 检测是否有token,并检查过期
  const checkUserToken = () => {
    // 检查是否存在已加密的用户令牌信息在 localStorage 中
    const encryptedUserToken = localStorage.getItem("encryptedUserToken");

    if (encryptedUserToken) {
      // 用户已登录，解密用户令牌并执行相应逻辑
      const decryptedUserToken = crypt.decrypt(encryptedUserToken);
      // console.log("解密的 user_token:", decryptedUserToken);
      // 执行其他逻辑，如设置用户状态、重定向等
      // 是否过期，过期重新请求，否则跳转
      // window.location.href = 'http://mfmaef89.beesnat.com/index';
      return decryptedUserToken;
    }
    return false;
  };
  // 校验access_token是否过期
  const checkTime = (encryptedUserToken: any) => {
    // 获取本地时间
    const isTime = isTokenValid(encryptedUserToken);
    // 有效期内
    if (isTime) {
      // this.getInfo(access_token)
      console.log("有效期内");
      // console.log(UserToken, "UserToken");
      // 跳转首页
      return true;
    } else {
      // 重新获取
      console.log("重新获取");
      // navigate("/");
      return false;
    }
  };

  // 判断是否在有效期内，后期后端做
  const isTokenValid = (encryptedUserToken: any) => {
    const currentTime = Math.floor(Date.now() / 1000); // 当前时间戳（秒）
    console.log(encryptedUserToken, "encryptedUserToken");
    // console.log(currentTime, "currentTime");
    const expirationTime = 7200 + encryptedUserToken.createdTime; // 过期时间戳
    // console.log(expirationTime, "expirationTime");
    return currentTime < expirationTime;
  };

  // 确定注册手机
  const determine = async () => {
    // 校验
    // 请求后端注册
    const params = { ...formData, openid: formData.mobile + UserToken.openid };
    const myToken = {
      ...UserToken,
      openid: formData.mobile + UserToken.openid,
    };
    console.log(params, "params");
    console.log(myToken, "myToken");
    // 注册请求
    const res = await ApiRegister(params);
    if (res.code == 0) {
      //  手机号 存到仓库
      dispatch(changeUser(formData));
      // 修改登录状态 为true
      // dispatch(changeIsLogin());
      console.log(res.data, "注册");
      // 换成注册状态
      // 加密存本地
      // const encryptNum = handleRegistration(formData.mobile);
      // console.log(encryptNum, "加密号码");
      // 加密存储accessToken
      const encryptedUserToken = handleUserTokenEncryption(myToken);
      console.log(encryptedUserToken, "加密access_token");
      // 存access_token的openid到仓库,用于后续获取会员信息
      // 存token
      dispatch(changeUserToken(myToken));
      // 检查登录状态
      await checkLogin(myToken);

      // 跳转信息页
      navigate("/index");
    }
  };

  // 请求登录状态
  const checkLogin = async (AccessToken: AccessToken) => {
    console.log(AccessToken.openid, "openid");
    const res = await ApiCheckLogin(AccessToken.openid);
    if (res.code == 0) {
      //  存到仓库？
      console.log(res.data.member_id, "member_id");
      // 当前页面使用
      setMember_id(res.data.member_id);
      // getMemberInfo(res.data.member_id);
      // 请求用户信息
      await getUserInfo(
        AccessToken.access_token,
        AccessToken.openid,
        res.data.member_id
      );
      return res.data.member_id;
    } else {
      console.log("未登录");
      return;
    }
  };
  // 获取userInfo
  const getUserInfo = async (
    access_token: string,
    openid: string,
    member_id: number
  ) => {
    // 校验是否有openid和session_member_id
    if (!openid || !member_id) {
      console.log("没有获取openid或没有校验登录");
      return;
    }
    const data = await wxfetch.getUserInfoFn(access_token, openid);

    if ("openid" in data) {
      await deterName(data, member_id);
    } else {
      // 请求失败，data 是 wxErrorInfo 类型
      console.error(data.errcode, data.errmsg);
    }
  };
  // 更新姓名性别
  const deterName = async (wxInfo: wxInfo, member_id: number) => {
    console.log(wxInfo.openid, "openid");
    // 校验是否有openid和session_member_id
    if (!wxInfo.openid || !member_id) {
      console.log("没有获取openid或没有校验登录");
      return;
    }
    console.log(wxInfo.openid, "openid");
    // 请求参数
    let myFormData = {
      ...formData,
      sex: wxInfo.sex == 0 ? 1 : 2,
      name: wxInfo.nickname,
      openid: wxInfo.openid,
      session_member_id: member_id,
    };
    console.log(myFormData, "myFormData");
    // 请求修改信息
    const res = await ApiMemberUpdate(myFormData);
    // 请求成功
    if (res.code == 0) {
      //  存到仓库
      dispatch(changeUser(myFormData));
      // 修改登录状态
      // dispatch(changeIsLogin());
      console.log(res.data, "修改成功");
    }
  };
  // 获取验证码
  const handleSendCodeClick = async () => {
    // 在这里处理发送验证码的逻辑
    // 获取手机号的值
    const res = await ApiSendCaptcha(formData.mobile);
    // 后续布置阿里云
    if (res.code == 0) {
      handleNameInputChange("captcha", res.data.code);
      setIsUpdate(true);
    }
    console.log("mobile:", formData.mobile);
  };

  useEffect(() => {
    // 获取用户信息
    getCode();
    // 检测是否注册过
  }, []);

  // 更新界面
  // 挂载页面
  useEffect(() => {
    // console.log(isUpdate, "isUpdate");
    // if (isUpdate) {
    //   deterName(UserToken.openid);
    // }
    form.setFieldsValue(formData);
  }, [formData, form]);

  // useEffect(() => {
  //   console.log(form, "form");
  //   if (isUpdate) {
  //     deterName(UserToken.openid);
  //   }
  //   // form.setFieldsValue(formData);
  // }, [form]);

  // 校验手机号
  const phoneValidator = (_, value, callback) => {
    if (value) {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // if (reg.test(value)) {
      //     handleNameInputChange("mobile", value);
      //     return callback();
      // }
      if (reg.test(value)) {
        handleNameInputChange("mobile", value);
        return Promise.resolve();
      }
      return Promise.reject(new Error("手机号无效"));
      // return Promise.reject(new Error("请输入11为数字手机号"));
    } else {
      return Promise.reject(new Error("手机号不得为空"));
    }
  };

  // 失去焦点
  const handleMobileBlur = async (e) => {
    const value = e.target.value;
    console.log(value, e);

    try {
      await form.validateFields(["mobile"]);
    } catch (error) {
      // 在这里可以处理验证失败的逻辑，例如显示错误信息
      console.error("Validation failed:", error);
    }
  };
  return (
    <div className={styles.form}>
      <Form
        initialValues={{ ...formData }}
        layout="horizontal"
        form={form}
        footer={
          <Button
            block
            type="submit"
            color="primary"
            size="large"
            shape="rounded"
            onClick={determine}
          >
            确认并前往主页
          </Button>
        }
      >
        <Form.Header>会员注册</Form.Header>
        {/* <Form.Item
          label="姓名"
          name="name"
          // rules={[{ required: true, message: "姓名不能为空" }]}
        >
          <Input
            onChange={(value) => handleNameInputChange("name", value)}
            placeholder="请输入姓名"
          />
        </Form.Item> */}
        <Form.Item
          name="mobile"
          label="手机号"
          // rules={[{ required: true }]}
          rules={[{ validator: phoneValidator }]}
        >
          <Input
            placeholder="请输入手机号"
            onBlur={handleMobileBlur}
            onChange={(value) => handleNameInputChange("mobile", value)}
          />
        </Form.Item>
        <Form.Item
          name="captcha"
          label="验证码"
          extra={<a onClick={handleSendCodeClick}>获取验证码</a>}
          // rules={[{ required: true }]}
        >
          <Input
            placeholder="请输入验证码"
            onChange={(value) => handleNameInputChange("captcha", value)}
          />
        </Form.Item>
        {/* <Form.Item
          name="plate_number"
          label="车牌号"
          rules={[{ required: true, message: "车牌号不能为空" }]}
        >
          <Input
            placeholder="请输入车牌号"
            onChange={(value) => handleNameInputChange("plate_number", value)}
          />
        </Form.Item>
        <Form.Item name="sex" label="性别">
          <Radio.Group
            onChange={(value) => handleNameInputChange("sex", value)}
          >
            <Radio value={1} className="radio">
              男
            </Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="birthday"
          label="出生日期"
          trigger="onConfirm"
          onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
            datePickerRef.current?.open();
          }}
        >
          <DatePicker
            onConfirm={(value) => {
              // 在这里处理确认选择后的值
              const val = value
                ? dayjs(value).format("YYYY-MM-DD")
                : "请选择日期";
              handleNameInputChange("birthday", val);
            }}
          >
            {(value) =>
              value ? dayjs(value).format("YYYY-MM-DD") : "请选择日期"
            }
          </DatePicker>
        </Form.Item> */}
        {/* <Form.Item
          noStyle
          shouldUpdate={(prevValues, curValues) =>
            prevValues.birthday !== curValues.birthday
          }
        >
          {({ getFieldValue, setFieldsValue }) => (
            <Form.Item
              name="birthday"
              label="出生日期"
              trigger="onConfirm"
              arrow={
                getFieldValue("birthday") ? (
                  <CloseCircleFill
                    style={{
                      color: "var(--adm-color-light)",
                      fontSize: 14,
                    }}
                    onClick={(e) => {
                      e.stopPropagation();
                      setFieldsValue({ birthday: null });
                    }}
                  />
                ) : (
                  true
                )
              }
              onClick={() => {
                setPickerVisible(true);
              }}
            >
              <DatePicker
                visible={pickerVisible}
                onConfirm={(value) => {
                  // 在这里处理确认选择后的值
                  const val = value
                    ? dayjs(value).format("YYYY-MM-DD")
                    : "请选择日期";
                  handleNameInputChange("birthday", val);
                }}
                onClose={() => {
                  setPickerVisible(false);
                }}
              >
                {(value) =>
                  value ? dayjs(value).format("YYYY-MM-DD") : "请选择日期"
                }
              </DatePicker>
            </Form.Item>
          )}
        </Form.Item> */}
        {/* <Form.Item name="address" label="地址" help="详情地址">
          <TextArea
            placeholder="请输入地址"
            maxLength={100}
            rows={2}
            showCount
          />
        </Form.Item> */}
      </Form>
    </div>
  );
}